<template>
    <div style="height: 100%; background: #fff">
        <div style="padding: 20px 0 0 20px; box-sizing: border-box">
            <el-form ref="form" :model="form" label-width="80px" :inline="true" size="mini">
                <el-form-item label="房屋地址:">
                    <div style="width: 140px">
                        <el-input v-model="form.fwdz" placeholder="请输入房屋地址" @keyup.enter.native="onSearch('form')"></el-input>
                    </div>
                </el-form-item>
                <el-form-item label="档案编号:" v-if="form.type == '2'">
                    <div style="width: 140px">
                        <el-input v-model="form.dabh" placeholder="请输入档案编号" @keyup.enter.native="onSearch('form')"></el-input>
                    </div>
                </el-form-item>
                <el-form-item label="部门:" v-if="type == '0'">
                    <div style="width: 140px">
                        <el-select v-model="form.type" placeholder="请选择部门" @change="onSearch('form')">
                            <el-option v-for="item in yhlxlist" :key="item.code" :label="item.name" :value="item.code"> </el-option>
                        </el-select>
                    </div>
                </el-form-item>
                <el-form-item label="管理方式:" v-if="form.type == '2'">
                    <div style="width: 140px">
                        <el-select v-model="form.glfs" placeholder="请选择管理方式" clearable @change="onSearch('form')">
                            <el-option v-for="item in glfslist" :key="item.code" :label="item.name" :value="item.code"> </el-option>
                        </el-select>
                    </div>
                </el-form-item>
                <el-form-item label="状态:" v-if="form.type == '2'">
                    <div style="width: 140px">
                        <el-select v-model="form.jyzt" placeholder="请选择状态" clearable @change="onSearch('form')">
                            <el-option v-for="item in ztlist" :key="item.code" :label="item.name" :value="item.code"> </el-option>
                        </el-select>
                    </div>
                </el-form-item>
                <el-form-item label="所号:" v-if="form.type == '1'">
                    <div style="width: 140px">
                        <el-input v-model="form.sh" placeholder="请输入所号" @keyup.enter.native="onSearch('form')"></el-input>
                    </div>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSearch('form')" icon="el-icon-search" class="searchcolor">查询</el-button>
                    <el-button @click="reSearch('form')" icon="el-icon-refresh" class="searchcolor">重置</el-button>
                </el-form-item>
                <el-form-item label="幢数:">
                    <span style="font-weight: 700">{{ total }}</span>
                </el-form-item>
            </el-form>
            <div style="display: flex; line-height: 26px; padding-bottom: 10px" v-if="this.form.type == '2'">
                <div>
                    <div style="height: 26px; display: flex">
                        <img src="@/assets/img/kz.png" alt="" style="width: 26px; height: 26px" />
                        <div style="line-height: 26px; margin: 0 10px">空置</div>
                    </div>
                </div>
                <div>
                    <div style="height: 26px; display: flex">
                        <img src="@/assets/img/cz.png" alt="" style="width: 26px; height: 26px" />
                        <div style="line-height: 26px; margin: 0 10px">出租</div>
                    </div>
                </div>
                <div>
                    <div style="height: 26px; display: flex">
                        <img src="@/assets/img/bgzy.png" alt="" style="width: 26px; height: 26px" />
                        <div style="line-height: 26px; margin: 0 10px">办公自用</div>
                    </div>
                </div>
                <div v-if="type == '2'">
                    <div style="height: 26px; display: flex">
                        <img src="@/assets/img/bzf.png" alt="" style="width: 26px; height: 26px" />
                        <div style="line-height: 26px; margin: 0 10px">保障性租赁住房</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- <div class="indexpic"></div>
        <div class="indextitle">欢迎使用自有房产管理系统</div> -->
        <!-- <input type="text" v-model="keyword" @input="search" /> -->
        <baidu-map class="bm-view" :zoom="zoom" dragging :scroll-wheel-zoom="true" :center="listcemter">
            <!-- <bm-local-search :keyword="keyword" @results="handleResults" /> -->
            <!-- 比例尺 -->
            <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
            <!-- 地图类型 -->
            <bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']" anchor="BMAP_ANCHOR_TOP_LEFT"></bm-map-type>
            <!-- 标注点 animation="BMAP_ANIMATION_BOUNCE"-->
            <!-- :icon="{url:require('../../assets/img/house.png') , size: {width: 32, height: 32}}" -->
            <div v-for="(item, index) in tableData" :key="index">
                <bm-marker
                    @click="clickMarker(item)"
                    :position="{ lng: item.jd, lat: item.wd }"
                    :icon="{
                        url: require(item.jyzt == '0'
                            ? '../../assets/img/kz.png'
                            : item.jyzt == '1'
                            ? '../../assets/img/cz.png'
                            : item.jyzt == '2'
                            ? '../../assets/img/bgzy.png'
                            : '../../assets/img/bzf.png'),
                        size: { width: 32, height: 32 }
                    }"
                ></bm-marker>
            </div>
            <!-- 弹窗功能 -->
            <bm-info-window :position="windowPosition" title="房屋基本信息" :show="show" @close="infoWindowClose" @open="infoWindowOpen">
                <div style="margin-top: 20px">档案编号：{{ blockDetailList.dabh }}</div>
                <div style="margin-top: 10px">区属：{{ blockDetailList.qs }}</div>
                <div style="margin-top: 10px">房屋地址：{{ blockDetailList.fwdz }}</div>
                <div style="margin-top: 10px">管理方式：{{ blockDetailList.glfs }}</div>
                <!-- <div style="margin-top: 10px">受托单位名称：{{ blockDetailList.stdwmc }}</div> -->
                <el-button type="text" style="float: right" @click="goToBlockDetail(detailId)" v-if="showxq">详情</el-button>
            </bm-info-window>
            <bm-info-window
                :position="windowPosition"
                title="房屋基本信息"
                :show="jlbshow"
                @close="infoWindowClosejlb"
                @open="infoWindowOpenjlb"
            >
                <div style="overflow: hidden">
                    <!-- <el-table :data="jlbtableData" border>
                        <el-table-column prop="sh" label="所号" align="center"> </el-table-column>
                        <el-table-column prop="qs" label="区属" align="center" width="100"> </el-table-column>
                        <el-table-column prop="fwdz" label="房屋地址" align="center" :show-overflow-tooltip="true"></el-table-column>
                        <el-table-column prop="fwyt" label="房屋性质" align="center"> </el-table-column>
                        <el-table-column prop="dabh" label="档案编号" align="center"> </el-table-column>
                        <el-table-column prop="jyzt" label="经营状态" align="center">
                            <template slot-scope="scope">
                                {{
                                    scope.row.jyzt == '0'
                                        ? '招租'
                                        : scope.row.jyzt == '1'
                                        ? '出租'
                                        : scope.row.jyzt == '0'
                                        ? '办公自用'
                                        : scope.row.jyzt == '3'
                                        ? '出借'
                                        : scope.row.jyzt == '4'
                                        ? '未经营'
                                        : scope.row.jyzt == '5'
                                        ? '有纠纷'
                                        : scope.row.jyzt == '6'
                                        ? '空置'
                                        : ''
                                }}
                            </template>
                        </el-table-column>
                        <el-table-column prop="jzmj" label="建筑面积" align="center"> </el-table-column>
                        <el-table-column fixed="right" label="操作" width="100" align="center">
                            <template slot-scope="scope">
                                <router-link :to="{ name: 'detaillz', params: { id: scope.row.id } }">
                                    <el-button type="text" size="small">查看</el-button>
                                </router-link>
                            </template>
                        </el-table-column>
                    </el-table> -->
                    <table width="100%" border="1" cellspacing="1" cellpadding="4" id="xqtableExcel7" align="center" class="table-2">
                        <tr style="background-color: #F5F7FA;color: #909399;font-size: 12px !important;font-weight: 700;font-family: PingFang SC, Helvetica Neue, Helvetica, microsoft yahei, arial, STHeiTi, sans-serif;">
                            <td colspan="1">所号</td>
                            <td colspan="1">区属</td>
                            <td colspan="1">房屋地址</td>
                            <td colspan="1">房屋性质</td>
                            <td colspan="1">档案编号</td>
                            <td colspan="1">经营状态</td>
                            <td colspan="1">建筑面积</td>
                            <td colspan="1">操作</td>
                        </tr>
                        <template>
                            <tr v-for="(item, index) in jlbtableData" :key="index" style="color: #909399;font-size: 12px;font-weight: 500;font-family: PingFang SC, Helvetica Neue, Helvetica, microsoft yahei, arial, STHeiTi, sans-serif;">
                                <td colspan="1">{{ item.sh ? item.sh : '— —' }}</td>
                                <td colspan="1">{{ item.qs ? item.qs : '— —' }}</td>
                                <td colspan="1">{{ item.fwdz ? item.fwdz : '— —' }}</td>
                                <td colspan="1">{{ item.fwyt ? item.fwyt : '— —' }}</td>
                                <td colspan="1">{{ item.dabh ? item.dabh : '— —' }}</td>
                                <td colspan="1">
                                    {{
                                        item.jyzt == '0'
                                            ? '招租'
                                            : item.jyzt == '1'
                                            ? '出租'
                                            : item.jyzt == '0'
                                            ? '办公自用'
                                            : item.jyzt == '3'
                                            ? '出借'
                                            : item.jyzt == '4'
                                            ? '未经营'
                                            : item.jyzt == '5'
                                            ? '有纠纷'
                                            : item.jyzt == '6'
                                            ? '空置'
                                            : '— —'
                                    }}
                                </td>
                                <td colspan="1">{{ item.jzmj ? item.jzmj : '— —' }}</td>
                                <td colspan="1" style="color: #008a94; cursor: pointer">
                                    <router-link :to="{ name: 'detaillz', params: { id: item.id } }">
                                        <el-button type="text" size="small">查看</el-button>
                                    </router-link>
                                </td>
                            </tr>
                        </template>
                    </table>
                    <div class="pagination" style="float: right">
                        <el-pagination
                            background
                            layout="total,prev, pager, next"
                            :total="jlbtotal"
                            :current-page.sync="current"
                            :page-size="pageSize"
                            @current-change="handleCurrentChange"
                        >
                        </el-pagination>
                    </div>
                </div>
            </bm-info-window>
        </baidu-map>
    </div>
</template>
<script>
import { maplist, buildlistbysh, jlbmaplist } from '@/api/index';
import valueList from '@/components/common/valueList.vue';
export default {
    data() {
        return {
            showxq: true, //是否显示详情按钮
            keyword: '',
            map: null,
            cblist: valueList.cblist,
            ztlist: valueList.indexztlist, //状态
            jlbztlist: valueList.jlbindexztlist, //状态
            glfslist: valueList.glfslist, //管理方式
            jlbglfslist: valueList.jlbglfslist, //管理方式
            yhlxlist: valueList.yhlxlist1,
            listcemter: { lng: '117.214034', lat: '39.125986' },
            show: false,
            jlbshow: false,
            windowDataAddress: '', //信息窗体数据
            windowDataStationName: '', //信息窗体数据
            detailId: '',
            windowDataBlockNo: '',
            windowPosition: {}, //坐标
            // center: { lng: 117.210813092, lat: 39.1439299033 },//定位
            center: { lng: 117.217643, lat: 39.144044 }, //定位
            zoom: 16, //缩放等级
            // 117.215143,39.11762
            tableData: [],
            jlbtableData: [],
            blockDetailList: {}, //当前所选地址详情
            form: {
                sh: '', //所号
                cb: '', //产别 ,
                cqdw: '', //产权单位 ,
                create_time: '', //创建时间 ,
                current: 1, //第几页 ,
                dabh: '', //档案编号 ,
                fwdz: '', //地址 ,
                glfs: '', //管理方式 ,
                id: '', //id ,
                jd: '', //经度 ,
                jyzt: '', //经营状态 0：空置 1：出租 ,
                jzmj: '', //建筑面积 ,
                pageSize: 1000, //每页数量 ,
                qs: '', //区属 ,
                stdwid: this.$store.getters.company ? (this.$store.getters.company != 'null' ? this.$store.getters.company : '') : '', //受托单位id ,
                stdwmc: '', //受托单位 ,
                wd: '', //纬度
                type: this.$store.getters.type == '0' ? '2' : this.$store.getters.type
            },
            jlbform: {},
            type: this.$store.getters.type,
            jlbtotal: 0,
            total: 0,
            current: 1,
            pageSize: 5
        };
    },
    methods: {
        handler({ BMap, map }) {
            this.map = map;
        },
        search() {
            if (this.keyword) {
                this.map.clearOverlays(); // 清除原有的搜索结果
            }
        },
        handleResults(results) {
            console.log(results);
            if (results.type === 'poiList') {
                this.map.clearOverlays(); // 清除原有的搜索结果
                const { pois } = results;
                pois.forEach((poi) => {
                    const { point } = poi;
                    this.map.centerAndZoom(point, 16);
                    // this.addMarker(point);
                });
            }
        },
        addMarker(point) {
            const marker = new BMap.Marker(point);
            this.map.addOverlay(marker);
        },
        // 项目列表
        async maplist(data) {
            await maplist(data).then((res) => {
                if (res.code == 200) {
                    this.tableData = res.data.records;
                    this.total = res.data.total;
                } else {
                    this.tableData = [];
                    this.total = 0;
                }
            });
        },
        // 项目列表（经理部）
        async jlbmaplist(data) {
            await jlbmaplist(data).then((res) => {
                if (res.code == 200) {
                    this.tableData = res.data.records;
                    this.total = res.data.total;
                } else {
                    this.tableData = [];
                    this.total = 0;
                }
            });
        },
        // 跳转所列表详情页面
        goToBlockDetail(id) {
            console.log('跳转页面功能');
            this.$router.push({
                name: 'detaillz',
                path: '/detaillz',
                params: { id: id }
            });
        },
        // 弹出窗口关闭
        infoWindowClose() {
            this.show = false;
        },
        // 经理部弹出窗口关闭
        infoWindowClosejlb() {
            this.jlbtableData=[]
            this.jlbshow = false;
        },
        // 弹出窗口
        infoWindowOpen() {
            this.show = true;
        },
        infoWindowOpenjlb() {
            this.jlbshow = true;
        },
        // 点击点标志
        clickMarker(data) {
            if (this.form.type == '2') {
                console.log(data);
                this.show = true;
                this.blockDetailList = data;
                this.detailId = data.id;
                this.windowPosition = {
                    lng: data.jd,
                    lat: data.wd
                };
                this.listcemter = this.windowPosition;
            } else if (this.form.type == '1') {
                console.log(data);
                this.jlbshow = true;
                this.detailId = data.id;
                this.windowPosition = {
                    lng: data.jd,
                    lat: data.wd
                };
                this.listcemter = this.windowPosition;
                this.jlbform = {
                    sh: data.sh,
                    current: 1,
                    pageSize: 5
                };
                this.buildlistbysh(this.jlbform);
            }
        },
        getnum() {
            if (this.$store.getters.role == '10011') {
                if (this.$store.getters.yzydbnum == 'true') {
                    alert(`预转已待办数量为${this.$store.getters.dbnum3},请尽快处理！！！`);
                    this.$store.commit('handleyzydbnum', false);
                } else {
                    console.log(123);
                }
            }
        },
        // 搜索
        onSearch() {
            this.tableData = [];
            this.form.type == '1' ? this.jlbmaplist(this.form) : this.maplist(this.form);
        },
        // 重置
        reSearch() {
            this.tableData = [];
            this.form = {
                sh: '', //所号
                cb: '', //产别 ,
                cqdw: '', //产权单位 ,
                create_time: '', //创建时间 ,
                current: 1, //第几页 ,
                dabh: '', //档案编号 ,
                fwdz: '', //地址 ,
                glfs: '', //管理方式 ,
                id: '', //id ,
                jd: '', //经度 ,
                jyzt: '', //经营状态 0：空置 1：出租 ,
                jzmj: '', //建筑面积 ,
                pageSize: 1000, //每页数量 ,
                qs: '', //区属 ,
                stdwid: this.$store.getters.company ? (this.$store.getters.company != 'null' ? this.$store.getters.company : '') : '', //受托单位id ,
                stdwmc: '', //受托单位 ,
                wd: '', //纬度
                type: this.$store.getters.type == '0' ? '2' : this.$store.getters.type
            };
            this.form.type == '1' ? this.jlbmaplist(this.form) : this.maplist(this.form);
        },
        // 换页
        handleCurrentChange(val) {
            this.current = val;
            this.jlbform.current = val;
            this.buildlistbysh(this.jlbform);
            console.log(val);
        },
        // 项目列表
        buildlistbysh(data) {
            buildlistbysh(data).then((res) => {
                if (res.code == 200) {
                    this.jlbtableData = res.data.records;
                    this.jlbtotal = res.data.total;
                } else {
                    this.jlbtableData = [];
                    this.jlbtotal = 0;
                }
            });
        }
    },
    mounted() {
        this.getnum();
        this.form.type = this.$store.getters.type == '0' ? '2' : this.$store.getters.type;
        this.$store.getters.type == '1' ? this.jlbmaplist(this.form) : this.maplist(this.form);
    },
    created() {
        this.showxq =
            this.$store.getters.role == '10001' ||
            this.$store.getters.role == '10002' ||
            this.$store.getters.role == '10003' ||
            this.$store.getters.role == '10010' ||
            this.$store.getters.role == '10011' ||
            this.$store.getters.role == '10013' ||
            this.$store.getters.role == '10015'
                ? true
                : false;
    }
};
</script>
<style scoped>
.indexpic {
    height: 100%;
    background-image: url('../../assets/img/indexpic.jpg');
    opacity: 0.1;
    background-size: cover;
    font-weight: 700;
    font-size: 32px;
    text-align: center;
    /* line-height: 400px; */
}

.indextitle {
    width: 50%;
    font-weight: 700;
    font-size: 32px;
    text-align: center;
    position: fixed;
    top: 200px;
    right: 0;
    left: 350px;
    font-family: cursive;
    /* 手写体 */
}
table {
    width: 100%;
    margin: auto;
    text-align: center;
}
.table-2 {
    border: 1px solid #c0c0c0;
    /* border-bottom: none; */
    border-collapse: collapse;
}
.table-2 tr,
.table-2 td {
    font-size: 14px;
    border-collapse: collapse;
    border: 1px solid #c0c0c0;
    border-bottom: none;
    padding: 6px;
    box-sizing: border-box;
}
.bm-view {
    width: 100%;
    height: calc(100% - 66px);
}
</style>
